<template>
  <q-layout view="lHh Lpr lFf">
    <q-layout-header>
      <q-toolbar
        color="primary"
        :glossy="$q.theme === 'desktop'"
        :inverted="$q.theme === 'ios'"
      >
        <q-btn
          flat
          dense
          round
          @click="leftDrawerOpen = !leftDrawerOpen"
          aria-label="Menu"
        >
          <q-icon name="menu" />
        </q-btn>

        <q-toolbar-title>
        SnailHD 
          <div slot="subtitle">admin.snailhd.cn v{{ $q.version }}</div>
        </q-toolbar-title>
      </q-toolbar>
    </q-layout-header>

    <q-layout-drawer
      v-model="leftDrawerOpen"
      :content-class="$q.theme === 'desktop' ? 'bg-grey-2' : null"
    >
      <div class="q-px-md q-pt-xl">
        <q-search v-model="search" />
      </div>
      
      <q-list link  inset-delimiter v-for="menuGroup in menuList">
        <q-list-header>{{menuGroup.title}} </q-list-header>
        <q-item :to="menu.path"  v-for="menu in menuGroup.subMenu">
          <q-item-side :icon="menu.icon" />
          <q-item-main :label="menu.title" :sublabel="menu.sublabel" />
        </q-item>
      </q-list>
      
    </q-layout-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { openURL } from 'quasar'

export default {
  name: 'LayoutDefault',
  data () {
    return {
      leftDrawerOpen: this.$q.platform.is.desktop,
      search:"",
      menuList:[{
        "title":"novel",
        "path":"",
        "subMenu":[
          {
            "icon":"school",
            "title":"novel",
            "path":"/novel",
            "sublabel":"",
          }
        ]
      }]
      
    }
  },
  methods: {
    openURL
  }
}
</script>

<style>
</style>
